<template>
  <!-- 海外引进 -->
  <div class="overseasPc">
    <tabs :index="3"></tabs>
    <div class="list">
      <toNews
        :detail="item"
        class="item"
        v-for="item in news.list"
        :key="item.id"
      >
        <img class="img" :src="item.webimages" />
        <div class="title">{{ item.name }}</div>
        <div class="describe">
          {{ item.description }}
        </div>
        <div class="detail">
          <div class="t">查看详情</div>
          <img class="ic" src="../../../assets/image/home/ic_right.png" />
        </div>
      </toNews>
    </div>
    <div class="more-box" @click="nextPage">
      <div class="text">加载更多</div>
      <img
        class="ic"
        v-if="news.page < news.total"
        src="../../../assets/image/publice/bottom-arrow.png"
      />
      <img
        class="ic"
        v-if="news.page == news.total"
        src="../../../assets/image/publice/top-arrow.png"
      />
    </div>
  </div>

  <div class="overseasMobile">
    <tabs :index="3"></tabs>
    <div class="list">
      <toNews
        :detail="item"
        class="item"
        v-for="item in news.list"
        :key="item.id"
      >
        <img class="img" :src="item.mobileimages" />
        <div class="title">{{ item.name }}</div>
        <div class="describe">
          {{ item.description }}
        </div>
        <div class="detail">
          <div class="t">查看详情</div>
          <img class="ic" src="../../../assets/image/home/ic_right.png" />
        </div>
      </toNews>
    </div>
    <div class="more-box" @click="nextPage">
      <div class="text">加载更多</div>
      <img
        class="ic"
        v-if="news.page < news.total"
        src="../../../assets/image/publice/bottom-arrow.png"
      />
      <img
        class="ic"
        v-if="news.page == news.total"
        src="../../../assets/image/publice/top-arrow.png"
      />
    </div>
  </div>
</template>

<script>
import tabs from "./tabs.vue";
import toNews from "@/components/toNews";
export default {
  components: { tabs, toNews },
  data() {
    return {
      news: {
        list: [],
        page: 1,
        total: 1,
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    // 初始化数据
    this.init();
  },
  methods: {
    /**
     * 初始化数据
     */
    async init() {
      // 获取数据
      this.getData();
    },
    /**
     * 更改页数
     */
    async pageChange() {
      // 设置页号
      this.news.page += 1;

      // 获取数据
      await this.getData();
    },

    nextPage() {
      if (this.news.total != 1 && this.news.page < this.news.total) {
        this.news.page++;
        this.getData();
      } else {
        this.$message("没有更多数据了");
      }
    },
    /**
     * 获取数据
     */
    async getData() {
      // 获取数据
      const result = await this.$request.get(
        "companyinno/importOverseaSyPage",
        {
          params: {
            cid: 4,
            page: this.news.page,
            pagenum: 6,
          },
        }
      );

      // 设置数据
      this.news.list = this.news.list.concat(result.data.article);
      this.news.total = result.data.totalpage;
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .overseasMobile {
    display: none;
  }

  .overseasPc {
    @include fn.fluidContainer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 92px;
    background: #f8f8f8;

    .more-box {
      cursor: pointer;
      margin-top: 92px;
      display: flex;
      flex-direction: column;
      align-items: center;
      // &:hover{
      //   transform: scale(1.2);
      // }

      .text {
        font-size: 20px;

        font-weight: 500;
        color: color.$base;
      }

      .ic {
        margin-top: 4px;
        width: 24px;
        height: 24px;
      }
    }

    .list {
      margin-top: calc(60px - 8px);
      width: 1416px;
      display: flex;
      flex-wrap: wrap;
      //gap: 16px;

      .item {
        position: relative;
        box-sizing: border-box;
        width: 456px;
        height: 495px;
        background: #ffffff;
        box-shadow: 0px 12px 24px 0px rgba(13, 4, 8, 0.08);
        display: flex;
        flex-direction: column;
        margin: 8px;

        .detail {
          cursor: pointer;
          position: absolute;
          bottom: 25px;
          right: 24px;
          display: flex;
          align-items: center;

          .t {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 16px;

            font-weight: 400;
            color: color.$base;
          }

          .ic {
            object-fit: fill;
            margin-left: 8px;
            width: 12px;
            height: 12px;
          }
        }

        .img {
          width: 456px;
          height: 256px;
          object-fit: cover;
        }

        .title {
          margin-left: 18px;
          margin-right: 18px;
          margin-top: 30px;
          @include fn.title();
        }

        .describe {
          margin-left: 18px;
          margin-right: 18px;
          margin-top: 14px;
          @include fn.describe(5);
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .overseasPc {
    display: none;
  }

  .overseasMobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: fn.rpx(70);

    .more-box {
      cursor: pointer;
      margin-top: fn.rpx(70);
      display: flex;
      flex-direction: column;
      align-items: center;
      // &:hover{
      //   transform: scale(1.2);
      // }

      .text {
        font-size: fn.rpx(16);

        font-weight: 500;
        color: color.$base;
      }

      .ic {
        margin-top: fn.rpx(4);
        width: fn.rpx(24);
        height: fn.rpx(24);
      }
    }

    .list {
      margin-top: fn.rpx(30);
      width: fn.rpx(720);
      display: flex;
      flex-wrap: wrap;
      //gap: fn.rpx(20);

      .item {
        position: relative;
        box-sizing: border-box;
        width: fn.rpx(337);
        height: fn.rpx(368);
        background: #ffffff;
        box-shadow: 0px fn.rpx(12) fn.rpx(24) 0px rgba(13, 4, 8, 0.08);
        display: flex;
        flex-direction: column;
        margin: fn.rpx(10);

        .detail {
          cursor: pointer;
          position: absolute;
          bottom: fn.rpx(25);
          right: fn.rpx(24);
          display: flex;
          align-items: center;

          .t {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: fn.rpx(16);

            font-weight: 400;
            color: color.$base;
          }

          .ic {
            object-fit: fill;
            margin-left: fn.rpx(8);
            width: fn.rpx(12);
            height: fn.rpx(12);
          }
        }

        .img {
          @include fn.scale(fn.rpx(337));
        }

        .title {
          box-sizing: border-box;
          padding: 0 fn.rpx(20);
          margin-top: fn.rpx(30);
          width: 100%;
          @include fn.title();
        }

        .describe {
          box-sizing: border-box;
          padding: 0 fn.rpx(20);

          margin-top: fn.rpx(14);
          width: 100%;
          @include fn.describe(2);
        }
      }
    }
  }
}
</style>